<template>
  <div>
    <el-form-item label="字体">
      <el-select v-model="attribute.fontFamily">
        <el-option v-for="(item,index) in textFamilyList" :key="index+item.value" :label="item.label" :value="item.value"/>
      </el-select>
    </el-form-item>
    <el-form-item label="颜色">
      <el-color-picker v-model="attribute.color" show-alpha/>
    </el-form-item>
    <el-form-item label="加粗">
      <el-radio-group v-model="attribute.fontWeight">
        <el-radio-button label="lighter">更细</el-radio-button>
        <el-radio-button label="normal">正常</el-radio-button>
        <el-radio-button label="bold">加粗</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="倾斜">
      <el-radio-group v-model="attribute.fontStyle">
        <el-radio-button label="normal">正常</el-radio-button>
        <el-radio-button label="italic">斜体</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <tm-group label="文字">
      <el-form-item label="文字大小" >
        <el-input-number v-model="attribute.fontSize" />
      </el-form-item>
      <el-form-item label="字体间距">
        <el-input-number :min="0" v-model="attribute.letterSpacing" />
      </el-form-item>
    </tm-group>
    <el-form-item label="高度">
      <el-input-number :min="0" v-model="attribute.height" />
    </el-form-item>
    <el-form-item label="行间距">
      <el-input-number v-model="attribute.marginBottom"/>
    </el-form-item>
    <el-form-item label="背景色">
      <tm-color-range  v-model="attribute.backgroundColor" />
    </el-form-item>
    <el-form-item label="背景图片">
      <tm-img-pick  v-model="attribute.backgroundImage" />
    </el-form-item>
  </div>
</template>

<script>
import {textFamilyList} from "@/package/tools/common";
import tmColorRange from "@/package/components/tm-color-range";
import tmImgPick from "@/package/components/tm-img-pick";


export default {
  name: 'th-option',
  cnName: 'th-option',
  components: {tmColorRange, tmImgPick},
  props: {
    attribute: Object
  },
  data() {
    return {
      textFamilyList
    }
  },
  methods: {}
}
</script>


